import QtQuick 2.5
import QtQuick.Controls 2.1
import ".."
import PinyinHandle 1.0

Popup
{
    id: myTextKeyboard
    height: 600
    width: 1024
    property var callback: null
    PinyinHandle
    {
        id: handle
    }
    onVisibleChanged:
    {
        outputArea.text = ""
        spellArea.text = ""
        wordList.model = null
        upperWord.pushed = false
        symbol.pushed = false
        pinyin.pushed = true
    }
    background: Rectangle
    {
        color: Qt.rgba(0.8, 0.8, 0.8, 0.6)
    }
    function analyseRemainString(content)
    {
        var delCount = Number(content.pop())
        if(delCount === -1)
        {
            spellArea.text = ""
            wordList.model = null
        }
        wordList.model = content
        spellArea.text = spellArea.text.substring(delCount, spellArea.text.length)
    }
    Rectangle
    {
        id: textWidget
        height: 350
        width: 900
        anchors.centerIn: parent
        radius: 4
        Item
        {
            id: workSpace
            anchors.fill: parent
            anchors.margins: 10
            Rectangle
            {
                id: inputBox
                height: 40
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                border.color: Common.colorMain
                border.width: 1
                radius: 4
                Text
                {
                    id: outputArea
                    anchors.fill: parent
                    anchors.leftMargin: 20
                    anchors.rightMargin: 20
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 16
                    font.family: Common.fontMain
                    color: Common.colorTextBlack
                }
            }
            Row
            {
                id: chineseArea
                height: 40
                width: parent.width
                anchors.top: inputBox.bottom
                anchors.topMargin: 10
                spacing: 5
                Text
                {
                    id: spellArea
                    width: (parent.width - parent.spacing) / 8
                    height: parent.height
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 16
                    font.family: Common.fontMain
                    color: Common.colorTextBlack
                    onTextChanged:
                    {
                        wordList.model = handle.getPinyinList(text)
                    }
                }
                Image
                {
                    id: pre
                    source: "qrc:/Images/move_left.png"
                    anchors.verticalCenter: parent.verticalCenter
                    visible: wordList.count > 5
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            GET_UAC.playBeep()
                            wordList.flick(1000, 0)
                        }
                    }
                }
                ListView
                {
                    id: wordList
                    height: parent.height
                    width: parent.width - spellArea.width - parent.spacing * 3 - pre.width - next.width
                    spacing: 5
                    clip: true
                    orientation: ListView.Horizontal
                    delegate: Button
                    {
                        text: modelData
                        width: (wordList.width - wordList.spacing * 4) / 5
                        height: wordList.height
                        onClicked:
                        {
                            GET_UAC.playBeep()
                            outputArea.text += text
                            myTextKeyboard.analyseRemainString(handle.checkRemainPinyin(text))
                        }
                    }
                }
                Image
                {
                    id: next
                    source: "qrc:/Images/move_right.png"
                    anchors.verticalCenter: parent.verticalCenter
                    visible: wordList.count > 5
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            GET_UAC.playBeep()
                            wordList.flick(-1000, 0)
                        }
                    }
                }
            }
            Row
            {
                id: first
                height: 50
                width: 645
                anchors.top: chineseArea.bottom
                anchors.topMargin: 10
                spacing: 5
                Repeater
                {
                    model: upperWord.pushed ? ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"] : ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]
                    MyButton
                    {
                        height: first.height
                        width: 60
                        text: modelData
                        onClicked:
                        {
                            if(pinyin.pushed)
                            {
                                spellArea.text += text
                            }
                            else
                            {
                                outputArea.text += text
                            }
                        }
                    }
                }
            }
            Row
            {
                id: second
                height: 50
                width: 645
                anchors.top: first.bottom
                anchors.topMargin: 10
                spacing: 5
                Item
                {
                    width: 20
                    height: parent.height
                }
                Repeater
                {
                    model: upperWord.pushed ? ["A", "S", "D", "F", "G", "H", "J", "K", "L"] : ["a", "s", "d", "f", "g", "h", "j", "k", "l"]
                    MyButton
                    {
                        height: second.height
                        width: 60
                        text: modelData
                        onClicked:
                        {
                            if(pinyin.pushed)
                            {
                                spellArea.text += text
                            }
                            else
                            {
                                outputArea.text += text
                            }
                        }
                    }
                }
            }
            Row
            {
                id: third
                height: 50
                width: 645
                anchors.top: second.bottom
                anchors.topMargin: 10
                spacing: 5
                Rectangle
                {
                    id: upperWord
                    height: parent.height
                    width: 92.5
                    radius: 4
                    property bool pushed: false
                    color: pushed ? Common.colorMain : Common.colorInvalid
                    Text
                    {
                        anchors.centerIn: parent
                        text: "大写"
                        font.pixelSize: 16
                        font.family: Common.fontMain
                        color: parent.pushed ? "white" : Common.colorTextBlack
                    }
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            GET_UAC.playBeep()
                            parent.pushed = !parent.pushed
                        }
                    }
                }
                Repeater
                {
                    model: upperWord.pushed ? ["Z", "X", "C", "V", "B", "N", "M"] : ["z", "x", "c", "v", "b", "n", "m"]
                    MyButton
                    {
                        height: third.height
                        width: 60
                        text: modelData
                        onClicked:
                        {
                            if(pinyin.pushed)
                            {
                                spellArea.text += text
                            }
                            else
                            {
                                outputArea.text += text
                            }
                        }
                    }
                }
                Rectangle
                {
                    id: symbol
                    height: parent.height
                    width: 92.5
                    radius: 4
                    property bool pushed: false
                    color: pushed ? Common.colorMain : Common.colorInvalid
                    Text
                    {
                        anchors.centerIn: parent
                        text: "符号"
                        font.pixelSize: 16
                        font.family: Common.fontMain
                        color: parent.pushed ? "white" : Common.colorTextBlack
                    }
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            GET_UAC.playBeep()
                            parent.pushed = !parent.pushed
                        }
                    }
                }
            }
            Row
            {
                id: forth
                height: 50
                width: 645
                anchors.top: third.bottom
                anchors.topMargin: 10
                spacing: 5
                Rectangle
                {
                    id: pinyin
                    height: parent.height
                    width: 70
                    radius: 4
                    property bool pushed: true
                    color: pushed ? Common.colorMain : Common.colorInvalid
                    Text
                    {
                        anchors.centerIn: parent
                        text: "中文"
                        font.pixelSize: 16
                        font.family: Common.fontMain
                        color: parent.pushed ? "white" : Common.colorTextBlack
                    }
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            GET_UAC.playBeep()
                            parent.pushed = !parent.pushed
                            if(!parent.pushed) spellArea.text = ""
                        }
                    }
                }
                MyButton
                {
                    height: parent.height
                    width: parent.width - 140 - parent.spacing * 2
                    text: ""
                }
                MyButton
                {
                    height: parent.height
                    width: 70
                    text: symbol.pushed ? "@" : "0"
                    onClicked:
                    {
                        if(spellArea.text != "") return
                        else outputArea.text += text
                    }
                }
            }
            Row
            {
                anchors.bottom: digit.top
                anchors.bottomMargin: 10
                spacing: 5
                anchors.left: digit.left
                anchors.right: digit.right
                MyButton
                {
                    text: "删除"
                    width: (digit.width - 10) / 3
                    height: (digit.height - 20) / 3
                    onClicked:
                    {
                        if(spellArea.text != "")
                        {
                            spellArea.text = spellArea.text.substring(0, spellArea.text.length - 1)
                        }
                        else
                        {
                            outputArea.text = outputArea.text.substring(0, outputArea.text.length - 1)
                        }
                    }
                }
                MyButton
                {
                    text: "关闭"
                    width: (digit.width - 10) / 3
                    height: (digit.height - 20) / 3
                    onClicked:
                    {
                        myTextKeyboard.close()
                    }
                }
                MyButton
                {
                    text: "保存"
                    width: (digit.width - 10) / 3
                    height: (digit.height - 20) / 3
                    enabled: outputArea.text != ""
                    onClicked:
                    {
                        myTextKeyboard.callback(outputArea.text)
                        myTextKeyboard.close()
                    }
                }
            }
            Grid
            {
                id: digit
                columns: 3
                rows: 3
                columnSpacing: 5
                rowSpacing: 10
                anchors.top: second.top
                anchors.bottom: forth.bottom
                anchors.left: second.right
                anchors.leftMargin: 10
                anchors.right: parent.right
                Repeater
                {
                    model: symbol.pushed ? ["(", ")", ".", "-", "_", "#", "*", "&", "$"] : ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
                    delegate: MyButton
                    {
                        text: modelData
                        width: (digit.width - 10) / 3
                        height: (digit.height - 20) / 3
                        onClicked:
                        {
                            if(spellArea.text != "") return
                            else outputArea.text += text
                        }
                    }
                }
            }
        }
    }
}
